<template>
  <div class="content">
    <!-- <Category2>
      <template v-slot:s2>
        <ul>
          <li v-for="(game, index) in games" :key="index">{{ game }}</li>
        </ul>
      </template>
      <template v-slot:s1>
        <div>热门游戏</div>
      </template>
    </Category2> -->
    <Category3>
      <template v-slot="params">
        <ul>
          <li v-for="(game, index) in params.games" :key="index">{{ game }}</li>
        </ul>
      </template>
    </Category3>
    <Category3>
      <template v-slot="params">
        <ol>
          <li v-for="(game, index) in params.games" :key="index">{{ game }}</li>
        </ol>
      </template>
    </Category3>
    <Category3>
      <template v-slot="params">
        <h3 v-for="(game, index) in params.games" :key="index">{{ game }}</h3>
      </template>
    </Category3>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Category from "./Category.vue";
import Category2 from "./Category2.vue";
import Category3 from "./Category3.vue";
// let title1 = ref("热门游戏");
// let games = ref(["王者荣耀", "绝地求生", "英雄联盟"]);
// let imgUrl = ref("https://z1.ax1x.com/2023/11/19/piNxLo4.jpg");
// let videoUrl = ref("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
</script>

<style scoped>
.content {
  display: flex;
  justify-content: space-evenly;
}
img,
video {
  width: 100%;
}
</style>
